<template>
  <div class="guide-page">
    <div class="banner">
      <div class="contentTop">
        <div class="contentTopImg">
          <div class="founderIcon"></div>
          <div class="contentTop_curtor">
            <h1 class="contentTop_title">创投内参只需要10分钟</h1>
            <p>100+资讯网站 | 1000+创投热点 | 10000+创业项目 | 定制高效的 VC商业情报</p>
            <router-link class="experienceLink" :to="{name: 'index'}">
              <span>立即体验</span>
            </router-link>
          </div>
        </div>
        <div class="drop_down">
          <div class="drop_down_clickBox">
            <p>为什么要用蜂鸟内参？</p>
            <p class="down_up_icon"></p>
          </div>
        </div>
      </div>
    </div>
    <div class="index_introduce">
      <div class="page index_introduceBox" v-for="(item, index) in contentList">
        <p class="index_intro_title" :class="[item.position === 'right' ? item.topin ? 'isRight topin':'isRight topout' : item.topin ? 'isLeft topin':'isLeft topout']">
          {{item.title}}
        </p>
        <ul class="index_intro_ul" v-if="item.position === 'left'">
          <li class="index_intro_img" :class="[item.topin ? 'leftin':'leftout']"><img :src="item.img" :alt="item.title"/></li>
          <li class="index_intro_tags" :class="[item.topin ? 'rightin':'rightout']">
            <p v-for="(tag, index) in item.tags" class="index_intro_icon">{{tag}}</p>
          </li>
        </ul>
        <ul class="index_intro_ul" v-else="item.position === 'right'">
          <li class="index_intro_tags" :class="[item.topin ? 'leftin':'leftout']">
            <p v-for="(tag, index) in item.tags" class="index_intro_icon">{{tag}}</p>
          </li>
          <li class="index_intro_img" :class="[item.topin ? 'rightin':'rightout']"><img :src="item.img" :alt="item.title"/></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import backToTop from '../../mixins/backToTop'
  export default {
    name: 'aboutUs',
    mixins: [backToTop],
    created () {
      this.backToTop()
    },
    mounted () {
      window.addEventListener('scroll', this.onScroll)
    },
    data () {
      return {
        contentList: [
          {
            position: 'right',
            title: '优质资源一手推送，快人一步',
            img: require('../../assets/images/guide/index-icon1.png'),
            tags: ['每日新创项目挖掘', '天使轮项目深度分析', '离职高管动向跟踪'],
            topin: false
          },
          {
            position: 'left',
            title: '投前信息智能汇总，一网打尽',
            img: require('../../assets/images/guide/index-icon2.png'),
            tags: ['100+创投媒体信息汇总', '52个创投专栏分类订阅', '每日投融资信息推送'],
            topin: false
          },
          {
            position: 'right',
            title: '投后信息持续跟踪，精准管理',
            img: require('../../assets/images/guide/index-icon3.png'),
            tags: ['产品动向及时掌握', '天使轮项目深度分析', '单一公司资讯定制'],
            topin: false
          },
          {
            position: 'left',
            title: '赛道动向追踪分析，机会把控',
            img: require('../../assets/svg/index_icon4.svg'),
            tags: ['赛道资讯整理推送', '关联投资人定位跟踪', '相关投资机构动向报道'],
            topin: false
          }
        ],
        activeClass: 'fadeInLeft',
        topin: 'topin',
        leftin: 'leftin',
        rightin: 'rightin',
        linkHref: ''
      }
    },
    methods: {
      onScroll () {
        // 获取内容区域的高度以及每部分距离页面顶部的距离
        let introduceBox = document.querySelectorAll('.index_introduceBox')
        let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
        // 封装添加移除方法
        var aimfunction = function (num, arr) {
          // 移除动画
          arr.forEach(function (el) {
            el.topin = false
          })
          // 添加动画
          arr[num].topin = true
        }
        // 区域内动画以及下滑
        for (let i = 0; i < introduceBox.length; i++) {
          let div = introduceBox[i]
          let indexH = div.offsetHeight
          let indexO = div.offsetTop
          if (document.querySelectorAll('.index_introduceBox')[0].offsetTop / 2 > scrolled) {
            this.contentList[i].topin = false
          } else if ((indexO + indexH) > (scrolled + indexH / 2) && (scrolled + indexH / 2) >= indexO) {
            aimfunction(i, this.contentList)
          } else if (indexO - indexH < scrolled) {
            this.contentList[i].topin = false
          }
        }
      }
    },
    destroyed () {
      window.removeEventListener('scroll', this.onScroll)
    }
  }
</script>

<style lang="scss">
  .guide-page{
    width: 100%;
    overflow: hidden;
    .contentTop {
      height: auto;
      overflow: hidden;
      background-color: #1f2327;
      .contentTopImg {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        margin-top: 60px;
        top: 0;
        left: 0;
        width: 100%;
        background: url(../../assets/images/guide/index-banner-bg.png) no-repeat center center;
        .founderIcon {
          width: 1232px;
          height: 474px;
          margin-top: 116px;
          background: url(../../assets/images/guide/index-banner.png) no-repeat center center;
        }
        .contentTop_curtor {
          margin-top: 80px;
          color: #ffffff;
          text-align: center;
          margin-bottom: 122px;
          h1 {
            font-size: 52px;
            letter-spacing: 1.12px;
            text-align: center;
          }
          p {
            font-size: 14px;
            letter-spacing: 1.14px;
            text-align: center;
            margin-top: 18px;
            margin-bottom: 50px;
          }
          .experienceLink {
            display: inline-block;
            width: 534px;
            height: 50px;
            border-radius: 4px;
            background-image: linear-gradient(to left, #00ba91 9%, #47e9f8 50%, #03A9F4 92%, #00ba91 100%);
            animation: animatedBackground 3s linear infinite;
            span {
              font-size: 24px;
              line-height: 50px;
              color: #ffffff;
              letter-spacing: 1.3px;
              text-shadow: 0 2px 4px rgba(0, 0, 0, 0.50);
              text-align: center;
            }
          }
        }
      }
      .drop_down {
        width: 100%;
        height: 224px;
        margin-top: 985px;
        background-color: #f5f5f5;
        .drop_down_clickBox {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        p:first-child {
          padding-top: 80px;
          font-size: 24px;
          color: #33383e;
          letter-spacing: 1.95px;
          text-align: center;
          cursor: pointer;
        }
        .down_up_icon {
          position: relative;
          width: 25px;
          height: 16px;
          background: url(../../assets/images/guide/down-up-icon.png) no-repeat center center;
          -webkit-animation: arrow 2s infinite ease;
          animation: arrow 2s infinite ease;
          cursor: pointer;
        }
      }
    }
    .index_introduce{
      background: #ffffff;
      .index_introduceBox {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 230px;
        width: 950px;
        margin: 0 auto;
        .index_intro_title {
          font-size: 42px;
          color: #33383e;
          letter-spacing: 3.41px;
          text-align: center;
        }
        .index_intro_ul {
          margin-top: 200px;
          display: flex;
          li:first-child {
            margin-right: 350px;
          }
          .index_intro_tags {
            margin-top: 80px;
          }
          p:nth-child(2) {
            margin-top: 46px;
            margin-bottom: 46px;
          }
          p {
            padding-left: 55px;
            font-size: 20px;
            color: #4c5764;
            letter-spacing: 1.08px;
            text-align: left;
          }
          .index_intro_icon:nth-child(1) {
            background: url(../../assets/images/guide/index-dot1.png) no-repeat center left;
          }
          .index_intro_icon:nth-child(2) {
            background: url(../../assets/images/guide/index-dot2.png) no-repeat center left;
          }
          .index_intro_icon:nth-child(3) {
            background: url(../../assets/images/guide/index-dot3.png) no-repeat center left;
          }
        }
      }
      .index_introduceBox:last-child {
        padding-bottom: 230px;
      }
    }
    /*右边淡出*/
    .rightout {
      -webkit-animation: fadeOutRight 1s .2s ease both;
      -moz-animation: fadeOutRight 1s .2s ease both;
    }
    /*右边淡入*/
    .rightin {
      -webkit-animation: fadeInRight 1s .2s ease both;
      -moz-animation: fadeInRight 1s .2s ease both;
    }
    /*左边淡出*/
    .leftout {
      -webkit-animation: fadeOutLeft 1s .2s ease both;
      -moz-animation: fadeOutLeft 1s .2s ease both;
    }
    /*左边淡入*/
    .leftin {
      -webkit-animation: fadeInLeft 1s .2s ease both;
      -moz-animation: fadeInLeft 1s .2s ease both;
    }
    /*上边淡出*/
    .topout {
      -webkit-animation: fadeOutUp 1s .2s ease both;
      -moz-animation: fadeOutUp 1s .2s ease both;
    }
    /*上边淡入*/
    .topin {
      -webkit-animation: fadeInDown 1s .2s ease both;
      -moz-animation: fadeInDown 1s .2s ease both;
    }
    /*动画区域*/
    .isLeft {
      padding-left: 346px;
      background: url(../../assets/svg/line1.svg) no-repeat center left;
    }
    .isRight {
      padding-right: 346px;
      background: url(../../assets/svg/line2.svg) no-repeat center right;
    }
  }
  @keyframes animatedBackground {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 534px 0;
    }
  }
  @-webkit-keyframes arrow {
    0%,
    100% {
      top: 22px;
    }
    50% {
      top: 32px;
    }
  }
  @keyframes arrow {
    0%,
    100% {
      top: 22px;
    }
    50% {
      top: 32px;
    }
  }

  /*css3动画效果代码*/
  @-webkit-keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-40px)
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0)
    }
  }
  @-moz-keyframes fadeInLeft {
    0% {
      opacity: 0;
      -moz-transform: translateX(-40px)
    }
    100% {
      opacity: 1;
      -moz-transform: translateX(0)
    }
  }
  @-webkit-keyframes fadeOutRight {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0)
    }
    100% {
      opacity: 0;
      -webkit-transform: translateX(40px)
    }
  }
  @-moz-keyframes fadeOutRight {
    0% {
      opacity: 1;
      -moz-transform: translateX(0)
    }
    100% {
      opacity: 0;
      -moz-transform: translateX(40px)
    }
  }
  @-webkit-keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: translateX(40px)
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0)
    }
  }
  @-moz-keyframes fadeInRight {
    0% {
      opacity: 0;
      -moz-transform: translateX(40px)
    }
    100% {
      opacity: 1;
      -moz-transform: translateX(0)
    }
  }
  @-webkit-keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-40px)
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0)
    }
  }
  @-moz-keyframes fadeInDown {
    0% {
      opacity: 0;
      -moz-transform: translateY(-40px)
    }
    100% {
      opacity: 1;
      -moz-transform: translateY(0)
    }
  }
  @-webkit-keyframes fadeOutUp {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0)
    }
    100% {
      opacity: 0;
      -webkit-transform: translateY(-40px)
    }
  }
  @-moz-keyframes fadeOutUp {
    0% {
      opacity: 1;
      -moz-transform: translateY(0)
    }
    100% {
      opacity: 0;
      -moz-transform: translateY(-40px)
    }
  }
  @-webkit-keyframes fadeOutLeft {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0)
    }
    100% {
      opacity: 0;
      -webkit-transform: translateX(-40px)
    }
  }
  @-moz-keyframes fadeOutLeft {
    0% {
      opacity: 1;
      -moz-transform: translateX(0)
    }
    100% {
      opacity: 0;
      -moz-transform: translateX(-40px)
    }
  }
</style>
